<template>
	<view>
		<view class="nav">
			<view class="retrun" @click="goBack">
				<image src="../../static/left.png"></image>
			</view>
			<view class="title">主体详情</view>
			<view class=""></view>
		</view>
		<view style="background-color: #F6F8F9;">
			<view class="items">
				<view class="items_1">
					<view class="items_11">
						<view class="head" :style="{background:bjColor[idx%4]}">{{String(datalist.operatingSubjectName).slice(0,1)}}</view>
						<view class="name">
							<view>{{datalist.operatingSubjectName}}<text :class="{ 'active1' : datalist.operatingState==1, 'active2' : datalist.operatingState==2}">{{datalist.operatingState==1?"正常":"疑似停业"}}</text></view>
							<view>更新时间：{{datalist.updateTime}}</view>
						</view>
					</view>
					<view class="items_22">
						<text>{{datalist.mainCategory}}</text><text>{{datalist.thinCategory}}</text><text>{{datalist.thirdCategory}}</text>
					</view>
					<view class="items_33">
						<view class="i_title">法定代表人：<text>{{datalist.legalRepresentative}}</text></view>
						<view class="i_title">电话：<text style="color:#2680EB;">{{datalist.enterpriseContactNumber}}</text></view>
						<view class="i_title">注册资本：<text>{{datalist.registeredCapital}}万{{datalist.currency}}</text></view>
						<view class="i_title">邮箱：<text>{{datalist.email}}</text></view>
					</view>
				</view>
			</view>
			<!-- 切换 -->
			<view class="tab">
				<view class="tab_title">
					<view v-for="(item,index) in itemTabs" :key="index"
					:class="{active:count===index}" @click="toTap(index)"
					>
						{{item}}
					</view>
				</view>
				<view class="end-cont" :class="{disbck:btnnum===0}">
					<basic-info></basic-info>
				</view>
				<view class="end-cont" :class="{disbck:btnnum===1}">
					<develop></develop>
				</view>
				<view class="end-cont" :class="{disbck:btnnum===2}">
					<infoRecord></infoRecord>
				</view>
				<view class="end-cont" :class="{disbck:btnnum===3}">
					<risk></risk>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMerchantDetails} from "../../request/config.js"
	import infoRecord from "../../components/info_record.vue"
	import basicInfo from '../../components/basic/index.vue' // 基本信息
	import develop from '../../components/develop/index.vue' // 发展概况
	import risk from '../../components/risk/index.vue' // 风险信息

	export default{
		components:{
			infoRecord,
			basicInfo,
			develop,
			risk
		},
		data(){
			return{
				itemTabs:["基本信息","发展概况","信息记录","风险信息"],
				btnnum:0,
				count:0,
				idx:"",  // 当前列表的索引
				datalist:{},
				bjColor:["#5159FB","#2CAAFF","#8D60E5","#E859CA"],
				infoRecord:{}
			}
		},
		methods:{
			toTap(e){
				this.count=e
				this.btnnum=e
			},
			goBack(){
				uni.navigateBack({
				    delta: 2
				});
			}
		},
		mounted(){},
		onLoad(option) {
			this.idx=JSON.parse(option.aa).idx;
			getMerchantDetails({id:JSON.parse(option.aa).id,type:2}).then(res=>{
				console.log("1111",res.data.data)
				// this.datalist=res.data.data;
			})
		},
		computed:{}
	}
</script>

<style scoped lang="stylus">
.nav{
	color :#FFFFFF;
	height :128rpx
	background: linear-gradient(0deg, #0D1533, #182D5E);
	display :flex;
	justify-content :space-between;
	padding :0 17rpx 20rpx;
	align-items :flex-end;
	box-sizing :border-box;
	view{
		&:last-child{
			width :44rpx;
			height :44rpx;
		}
	}
	.retrun{
		width :44rpx;
		height :44rpx;
		image{
			width :44rpx;
			height :44rpx;
		}
	}
	.title{
		font-size :36rpx;
	}
}
.items{
	background-color :#FFFFFF;
	margin-bottom :16rpx;
	.items_1{
		padding :36rpx 30rpx;
		box-sizing :border-box;
		.items_11{
			display :flex;
			.head{
				width :88rpx;
				height :88rpx;
				margin-right :24rpx;
				border-radius :8rpx;
				color :#FFFFFF;
				display: flex;
				justify-content :center;
				align-items :center;
				font-size :48rpx;
				background-color red
			}
			.name{
				view{
					&:first-child{
						display :flex;
						align-items :center;
						text{
							&:first-child{
								font-size :34rpx;
								color :#282828;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							&:last-child{
								border-radius: 4rpx;
								font-size :20rpx;
								padding :2rpx 8rpx;
								margin-left :18rpx;
							}
						}
						.active1{
							color:#3EC080 !important;
							border: 1rpx solid #54C78F;
						}
						.active2{
							color:#FA3434 !important;
							border: 1rpx solid #FA3434;
						}
					}
					&:last-child{
						font-size :26rpx;
						margin-top :10rpx;
						color :#999999;
						text{
							color :#333333;
						}
					}
				}
			}
		}
		.items_22{
			padding-left :112rpx;
			text{
				display :inline-block;
				font-size :22rpx;
				margin-right :12rpx;
				margin-top :24rpx;
				border-radius: 4rpx;
				line-height :40rpx;
				padding 0 8rpx
				&:first-child{
					background-color: #C8F1F0;
					color :#40C0BB;
				}
				&:nth-child(2){
					background-color:rgba(#409EFF,.2) ;
					color :#409EFF;
					
				}
				&:last-child{
					background-color: #FCE8DA;
					color :#F28758;
				}
			}
		}
		.items_33{
			font-size :26rpx;
			color :#999999;
			display :flex;
			flex-wrap :wrap;
			justify-content :space-between;
			view{
				width :50%;
				margin-top :27rpx;
			}
			text{
				color :#333333;
			}
		}
	}
}
.tab{
	background-color #FFFFFF;
	margin-top :20rpx;
}

.tab_title{
	display :flex;
	font-size :30rpx;
	color :#666666;
	line-height :92rpx;
	height :92rpx;
	justify-content :space-between;
	padding :0 35rpx;
	.active{
		color :#2680EB;
		border-bottom :7rpx solid #2680EB;
	}
}
.end-cont{
	display :none;
}
.disbck{
	display: block;
}
</style>
